<template>
    <div class="home">
        <van-nav-bar :title="alertext" safe-area-inset-top @click-left="onClickLeft" left-text="返回" fixed="'true"
            placeholder left-arrow>

        </van-nav-bar>
        <div>
            <van-popup :show="showPicker" round>
                <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
            </van-popup>
        </div>
        <van-form :model="formParams" @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="formParams.prjname" name="项目名称" label="项目名称" placeholder="请输入项目名称" right-icon="search"
                    clearable @change="onSearch" :rules="[{ required: true, message: '请选择项目名称' }]" />
                <van-field v-model="formParams.code" readonly type="number" name="code" label="项目编码" placeholder="请点击搜索选择项目"
                    :rules="[{ required: true, message: '没有选择项目，请点击搜索选择项目' }]" />
                <van-field v-model="formParams.username" name="username" label="姓名" placeholder="请填写姓名"
                    :rules="[{ required: true, message: '请填写劳务员|劳资员|项目经理的姓名' }]" />
                <van-field v-model="formParams.idcardnum" name="idcardnum" label="身份证号码" placeholder="请填写管理人员身份证信息"
                    :rules="[{ required: true, message: '请填写劳务员|劳资员|项目经理的身份证信息' }]" />
                <van-field v-model="formParams.phone" type="tel" name="phone" label="电话" placeholder="电话"
                    :rules="[{ required: true, message: '请填写电话' }]" />
                <van-field v-model="formParams.cardNum" name="cardNum" label="考勤卡号" placeholder="请输入考勤卡号"
                    :rules="[{ required: true, message: '请填写考勤卡号' }]" />
                <van-field label="岗位信息">
                    <template #input>
                        <van-radio-group v-model="formParams.worktype" direction="horizontal">
                            <van-radio name="G001">项目经理</van-radio>
                            <van-radio name="G014">总监理工程师</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<style scoped>
.my-van-card {
    --van-card-text-color: red;
    text-align: left;
}

.mytag {
    padding: 2%;
}

.delete-button {
    height: 100%;
}

.custom-desc {
    color: red;
    font-size: 14px;
    padding: 2%;
    /* 在这里添加其他样式属性 */
}
</style>

<script>
// 1. 引入你需要的组件
import { Search, Form, Field, CellGroup, Picker, Popup, showToast, RadioGroup, Radio, Button, showDialog, NavBar } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
// import { ref } from 'vue';
import axios from "axios";



export default {
    name: 'HomeView',
    setup() {
        const onClickLeft = () => history.back();
        const columns = [];
        const oldcolumns = [];
    
        // const username = ref('');
        // const worktype = ref('1');
        // const phone = ref('');
        // const idcardnum=ref('');
        // const cardNum=ref('');
        // const showPicker = ref(false);
        
        return {
            onClickLeft,
            showPicker:false,
            oldcolumns,
            columns,
            formParams: {
                prjname: '',
                code: '',
                username: '',
                worktype: '',
                phone: '',
                idcardnum: '',
                cardNum: ''
            }
        }
    },
    data() {
        return {
            keyword: '',
            selectedValue: '',
        };
    },

    components: {
        [Search.name]: Search,
        [Form.name]: Form,
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
        [showToast.name]: showToast,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
        [Button.name]: Button,
        [showDialog.name]: showDialog,
        [NavBar.name]: NavBar
    },
    mounted() {

        axios.post('http://bs.bzjsgl.cn/wxapi/Messagetemplate/subjectListInfo')
            .then(res => {
                var newList = res.data['data']
                if (res.data['code'] === 20000) {
                    for (let i = 0; i < newList.length; i++) {
                        let newItem = { text: newList[i]['value'], value: newList[i]['address'] };
                        this.oldcolumns.push(newItem);
                    }
                    console.log(this.oldcolumns)
                }
            })
            .catch(function (error) { // 请求失败处理
                console.log(error)
            })
    },
    methods: {
        onSearch() {
            console.log('搜索关键词：', this.formParams.prjname);
        
            this.showPicker = true;
            this.columns = this.oldcolumns
            console.log(this.columns,'++++++++++++++++')
            if (this.formParams.prjname === '') {
                this.$forceUpdate();
                // return this.columns;
            } else {
                this.columns = this.columns.filter(item => item.text.includes(this.formParams.prjname));
                this.$forceUpdate();
                console.log(this.columns);
                // return this.columns.filter(item => item.text.includes(this.keyword));
            }
        },
        submitForm() {
            const value = this.formParams;
            console.log(value); // 输出表单的值
        },
        onConfirm({ selectedOptions }){
            this.showPicker = false;
            this.formParams.prjname= selectedOptions[0].text;
            this.formParams.code = selectedOptions[0].value;
            console.log(this.formParams.prjname)
        }
    },
}
</script>
